/*
 * @Descripttion:
 * @Author: cuidm
 * @Date: 2022-09-26 14:29:16
 * @LastEditors: cuidm
 * @LastEditTime: 2022-09-26 16:33:56
 */

import G6 from '@antv/g6';
import React, { useRef, useEffect, useState } from 'react';
import iconfontModel from '@/assets/iconfont/iconfont.json';
export const getIcons = () => {
    let icons = {};
    glyphs.map((item) => (icons[`${css_prefix_text}${item.font_class}`] = item.unicode));
    return icons;
};

const { glyphs, font_family, css_prefix_text } = iconfontModel;

const GRAPH_ID = 'model-relation-topo-container';
const RelationTopo = ({ info, associateType }) => {
    const domRef = useRef(null);
    const graphRef = useRef(null);
    let graph = graphRef.current;
    const createGraphic = () => {
        const container = document.getElementById(GRAPH_ID);
        const tree = new G6.Graph({
            container: domRef.current,
            width: container.offsetWidth,
            height: container.offsetHeight,
            fitCenter: true,
            defaultNode: {
                type: 'circle',
                size: 26,
                style: {
                    cursor: 'pointer',
                    fill: '#3056E3',
                    shadowColor: '#1b47ea',
                    shadowBlur: 1,
                    fillOpacity: 0.5,
                },
                icon: {
                    fontFamily: 'iconfont',
                    fill: '#fff',
                    show: true,
                    fontSize: 16,
                },
                labelCfg: {
                    //字体样式
                    position: 'bottom',
                    offset: 10,
                    style: {
                        fill: '#666',
                        fontSize: 12,
                    },
                },
            },
            defaultEdge: {
                type: 'line',
                style: {
                    stroke: '#3056E3',
                    strokeOpacity: 1,
                    lineWidth: 1.5,
                    lineAppendWidth: 3,
                    endArrow: {
                        path: G6.Arrow.triangle(8, 8, 0),
                        fill: '#3056E3',
                    },
                },
                labelCfg: {
                    // autoRotate: true,
                    style: {
                        background: {
                            fill: '#fff',
                            stroke: '#fff',
                            padding: [3, 2, 3, 2],
                            radius: 2,
                            lineWidth: 1,
                            zIndex: 1,
                        },
                    },
                },
            },
            layout: {
                type: 'dagre',
                rankdir: 'LR',
                nodesepFunc: () => 30,
                ranksepFunc: () => 60,
            },
            animate: true,
            modes: {
                default: ['drag-canvas', 'drag-node', 'zoom-canvas'],
            },
        });

        graphRef.current = tree;
        return tree;
    };

    useEffect(() => {
        if (info && associateType) {
            let moduleIcons = localStorage.getItem('moduleIcons');
            if (moduleIcons) moduleIcons = JSON.parse(moduleIcons);
            console.log(moduleIcons);
            const srcModuleIcon = moduleIcons?.[info.srcModuleId] ?? 'icon-default';
            const destModuleIcon = moduleIcons?.[info.srcModuleId] ?? 'icon-default';
            const data = {
                nodes: [
                    {
                        id: info.srcModuleId,
                        label: info.srcModuleName,
                        icon: {
                            fontFamily: 'iconfont',
                            text: unescape('%u' + getIcons()[srcModuleIcon]),
                        },
                    },
                    {
                        id: info.destModuleId,
                        label: info.destModuleName,
                        icon: {
                            fontFamily: 'iconfont',
                            text: unescape('%u' + getIcons()[destModuleIcon]),
                        },
                    },
                ],
                edges: [
                    {
                        source: info.srcModuleId,
                        target: info.destModuleId,
                        label: `${info.associateType}(${associateType[info.associateType] || '-'})`,
                    },
                ],
            };
            graph = createGraphic();
            graph.read(data);
            // 关闭局部渲染解决缩放或者拖拽引起的残影问题（关闭会影响性能，临时解决办法）
            graph.get('canvas').set('localRefresh', false);
        }

        return () => {
            if (graph) {
                graph.destroy();
            }
        };
    }, [info, associateType]);

    return (
        <div style={{ width: '100%', height: 50, position: 'relative' }}>
            <div ref={domRef} id={GRAPH_ID} style={{ height: '100%' }}></div>
        </div>
    );
};

export default RelationTopo;
